import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导入 Pinia
import {
  Toast,
  Loading,
  Switch,
  Button,
  List,
  Cell,
  PullRefresh,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Form,
  Field,
  CellGroup,
  Picker
} from 'vant'
import 'vant/es/toast/style'
import 'vant/es/image-preview/style'
import 'vant/es/dialog/style'
import 'normalize.css'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

import App from './App.vue'
import router from './router.js'
import '../../style/common.less'
import swipeleft from './directive/swipeleft.js'

window.md = new MarkdownIt({
  html: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return (
          '<pre class="hljs"><code>' +
          hljs.highlight(lang, str, true).value +
          '</code></pre>'
        )
      } catch (__) {}
    }

    return (
      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
    )
  }
})

String.prototype.replaceAll = function (s1, s2) {
  return this.replace(new RegExp(s1, 'gm'), s2)
}

if (import.meta.env.MODE.trim() === 'beta') {
  new VConsole()
}

const pinia = createPinia()
const app = createApp(App)

app.config.globalProperties.$toast = Toast
app.config.globalProperties.$config = {}

app.directive('swipeleft', swipeleft)

app
  .use(pinia)
  .use(router)
  .use(Loading)
  .use(Switch)
  .use(Button)
  .use(List)
  .use(Cell)
  .use(PullRefresh)
  .use(Swipe)
  .use(SwipeItem)
  .use(Grid)
  .use(GridItem)
  .use(Form)
  .use(Field)
  .use(CellGroup)
  .use(Picker)
  .mount('#app')
